<template>
  <div>
    <h5 class="info-text"> 您是什么身份呢？</h5>
    <div class="md-layout">
      <div class="md-layout-item">
        <div class="md-layout">
          <div class="md-layout-item md-size-33 md-xsmall-size-100">
            <icon-checkbox :checked="userType.role1" @input="inputEvent('role1', $event)"
                           icon="fas fa-laptop"
                           title="明星">
            </icon-checkbox>
          </div>
          <div class="md-layout-item md-size-33 md-xsmall-size-100">
            <icon-checkbox :checked="userType.role2" @input="inputEvent('role2', $event)"
                           icon="fas fa-laptop"
                           title="政客">
            </icon-checkbox>
          </div>
          <div class="md-layout-item md-size-33 md-xsmall-size-100">
            <icon-checkbox :checked="userType.role3" @input="inputEvent('role3', $event)"
                           icon="fas fa-laptop"
                           title="航天员">
            </icon-checkbox>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {IconCheckbox} from '@/components'
  import {toast,} from '@/utils/tools'

  export default {
    components: {
      IconCheckbox
    },
    data() {
      return {
        userType: {
          role1: false,
          role2: false,
          role3: false,
        },
      }
    },
    computed:{
      role(){
        let role = '';
        if(this.userType.role1){
          role = 'role1';
        }else if(this.userType.role2){
          role = 'role2';
        }else if(this.userType.role3) {
          role = 'role3';
        }
        return role;
      }
    },
    methods: {
      inputEvent(type, value){
        if(value){
          Object.keys(this.userType).forEach(key=>{
            this.userType[key] = type === key;
          })
        }else{
          this.userType[type] = false;
        }
      },
      validate() {
        return new Promise((resolve, reject)=>{
          if(this.role === ''){
            toast('请选择身份', 'warning')
            reject(false)
          }else{
            this.$emit('on-validated', true, {role: this.role})
            resolve(true)
          }
        })
      }
    }
  }
</script>
<style>
</style>
